:root {
  --input-min-height: 44px;
  --input-min-height-2xl: 48px;
}

.input,
input,
textarea,
select {
  @apply w-full;
  @apply px-4 py-[0.625rem];
  @apply shadow;
  @apply bg-white border border-text-500;
  @apply rounded-xs;
  @apply leading-none;
  @apply min-h-[var(--input-min-height)] 2xl:min-h-[var(--input-min-height-2xl)];
  @apply focus:outline-none;
  @apply placeholder-secondary-400;
}

.input--sm {
  @apply text--sm leading-5;
}

.input--lg {
  @apply text--lg leading-7;
}

.input--base {
  @apply leading-6 text--base;
}

.input--outline {
  @apply text-text-800;
  @apply border-text-500;
}

[disabled],
.input--disabled {
  @apply bg-text-50;
  @apply text-text-400;
  @apply border-text-300;
  @apply pointer-events-none cursor-not-allowed;
}

.input--submit {
  @apply cursor-pointer;
}

.input--error {
  @apply text-red-800;
  @apply border-red-500;
  @apply placeholder-red-400;

  & + label {
    @apply text-red-800 mr-3;
  }
}

.input--negative {
  @apply text-white;
  @apply bg-secondary-500;
  @apply placeholder-secondary-50;
  @apply border-secondary-300;
  @apply hover:text-text-300 focus:text-text-300;

  &:disabled,
  &.input--disabled {
    @apply bg-secondary-300;
    @apply text-secondary-200;
  }
}

.input--error.input--negative {
  @apply text-red-200 border-red-300;
}

/* RADIO AND CHECKBOXES */

input[type='checkbox'],
input[type='radio'] {
  @apply h-[0.9rem] w-[0.9rem] min-h-0 shrink-0 mr-2;
  @apply p-0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;

  &:disabled,
  &.input--disabled {
    @apply opacity-40;
  }
}

input[type='checkbox'].input--sm,
input[type='radio'].input--sm {
  @apply h-3 w-3;
}

input[type='checkbox'].input--base,
input[type='radio'].input--base {
  @apply h-[0.9rem] w-[0.9rem];
}

input[type='checkbox'].input--lg,
input[type='radio'].input--lg {
  @apply h-[1rem] w-[1rem];
}

input[type='checkbox'].input--outline,
input[type='radio'].input--outline {
  &:disabled,
  &.input--disabled {
    @apply bg-text-100 border-text-300;
  }
}

input[type='checkbox'].input--negative,
input[type='radio'].input--negative {
  @apply bg-secondary-400;
  @apply border border-white;

  &:disabled,
  &.input--disabled {
    @apply bg-text-300 border-text-400;
  }
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  @apply bg-text-700;
  background-repeat: no-repeat;
  background-position: center;

  &:disabled,
  &.input--disabled {
    @apply bg-text-700 border-text-500;
  }
}

input[type='radio'] {
  @apply rounded-full;
}

input[type='radio']:checked {
  background-position: 50% 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='3' fill='white'/%3E%3C/svg%3E%0A");
}

input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20692 0.293031C9.39439 0.480558 9.49971 0.734866 9.49971 1.00003C9.49971 1.26519 9.39439 1.5195 9.20692 1.70703L4.20692 6.70703C4.01939 6.8945 3.76508 6.99982 3.49992 6.99982C3.23475 6.99982 2.98045 6.8945 2.79292 6.70703L0.792919 4.70703C0.610761 4.51843 0.509966 4.26583 0.512245 4.00363C0.514523 3.74143 0.619692 3.49062 0.8051 3.30521C0.990508 3.1198 1.24132 3.01463 1.50352 3.01236C1.76571 3.01008 2.01832 3.11087 2.20692 3.29303L3.49992 4.58603L7.79292 0.293031C7.98045 0.10556 8.23475 0.000244141 8.49992 0.000244141C8.76508 0.000244141 9.01939 0.10556 9.20692 0.293031Z' fill='white'/%3E%3C/svg%3E%0A");
}

/* OTHER INPUT TYPES */

input[type='color'] {
  @apply h-12;
}

input[type='range'] {
  @apply border-0;
  box-shadow: none;
}

/* Search remove styles from search group */
.search__group input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

/* Remove resizable from textarea */
.textarea--static {
  resize: none;
}
